<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH }content/scripts/bootstrap/css/bootstrap.min.css">
	<style>
		.nofree{color:#ccc;}
	</style>
	<title>假日设定</title>
	<script src="${ROOT_PATH }content/scripts/jquery-1.10.1.min.js"></script>
	<script src="${ROOT_PATH }content/scripts/jquery.form.js"></script>
	<script src="${ROOT_PATH }content/scripts/juery.hammer.js"></script>
	<script src="${ROOT_PATH }content/scripts/bootstrap/js/bootstrap.min.js"></script>
	<script src="${ROOT_PATH }content/scripts/datepicker/WdatePicker.js"></script>
	<script type="text/javascript">
		$(function(){
			windowInit();
			
		});
        function windowInit(){
        
            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth()+1;
            document.getElementById("year").value = year;
            document.getElementById("month").value = month;
            myCalender(year,month,"cla","");
        }
        
		function myCalender(year, month, tbId, url) {
			var oTable = document.getElementById(tbId);//取得table
			var oTBody = oTable.tBodies[1];
			var row_length = oTBody.rows.length;
			for (var rows = 0; rows < row_length; rows++) {

				oTBody.deleteRow(0);
			}
			var crrentDay = new Date();
			crrentDay.setYear(year);
			crrentDay.setMonth(month);
			var maxIndex = new Date(crrentDay.getFullYear(), crrentDay
					.getMonth(), 0).getDate();

			var firstIndex = new Date(crrentDay.getFullYear(), crrentDay
					.getMonth() - 1, 1).getDay();

			var days = new Array(42);

			for (var d = 0; d < maxIndex; d++) {
				days[firstIndex + d] = d + 1;
			}

			for (var d = 0; d < 42; d++) {
				if (days[d] == null || days[d] == "") {
					days[d] = "&nbsp;";
				}
			}
			var disabled = new Array();
			$.ajax({
				url:"${ROOT_PATH }Staff/holiday/orderDate",
				data:{year:year,month:month},
				async: false,
				dataType: "json",
				success:function(data){
					disabled = data;
				}
			});
			
			for (var j = 0; j < 6; j++) {
				var newTr = document.createElement("TR");
				for (var i = j * 7; i < (j + 1) * 7; i++) {
					var newTd = document.createElement("TD");
					if (days[i] == "&nbsp;") {
						newTd.innerHTML = days[i];
					} else {
						var can = true;
						for(k=0;k<disabled.length;k++){
							if(disabled[k]==days[i])
								can = false;
						}
						if(can){
							newTd.innerHTML = "<span class=\"free\">"+days[i]+"<span>";
						}else{
							newTd.innerHTML = "<span class=\"nofree\">"+days[i]+"<span>";
						}
						
					}
					newTd.setAttribute("width", "40px");
					newTd.setAttribute("height", "40px");
					newTr.appendChild(newTd);
				}
				oTBody.appendChild(newTr);
			}
			$(".free").bind("click",sureDay);
		}
		function changeDate(){
			var year = document.getElementById("year").value;
	        var month = document.getElementById("month").value;
            myCalender(year,month,"cla","");
		}
		function sureDay(){
			var year = document.getElementById("year").value;
	        var month = document.getElementById("month").value;
	        var date = year+"-"+month+"-"+$(this).text();
	        if(this.className=="nofree"){
	        	return;
	        }
			if(confirm("选择"+date+"为休息日？")){
				
				$.post("${ROOT_PATH}Staff/holiday/submit",{date:date},function(data){
					if(data.isok){
						$(this).attr("class","nofree");
						alert("选择"+date+"作为休息，提交成功。"); 
					}else{
						alert("选择失败,请稍后再试！");
					}
				},"json");
			}
		}
	</script>
</head>
<body >
        	<h1>休息日选择</h1>
            <table width="100%" border="0" cellspacing="0" cellpadding="0"
                style="margin: 0 auto; margin-top: 5px">
                <tr>
                    <td valign="top" style="padding-right: 5px; padding-bottom: 10px">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0"
                            style="border: 1px solid #e8e8e8; border-top: 0;">
                            <tr>
                                <td style="padding: 15px; padding-top: 0">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="cla">
                                        <tr>
                                            <td colspan="7" align="center" height="50">
                                                <select id="year" onchange="changeDate()">
                                                    <option value="2015">2015</option>
                                                    <option value="2016">2016</option>
                                                    <option value="2017">2017</option>
                                                    <option value="2018">2018</option>
                                                    <option value="2019">2019</option>
                                                    <option value="2020">2020</option>
                                                    <option value="2021">2021</option>
                                                </select>&nbsp;年&nbsp; 
                                                <select id="month" onchange="changeDate()">
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                    <option value="5">5</option>
                                                    <option value="6">6</option>
                                                    <option value="7">7</option>
                                                    <option value="8">8</option>
                                                    <option value="9">9</option>
                                                    <option value="10">10</option>
                                                    <option value="11">11</option>
                                                    <option value="12">12</option>
                                                </select>&nbsp;月&nbsp;&nbsp;
                                            </td>
                                        </tr>
                                        <tr>
                                            <th width="100px" height="60px">
                                                <font color="red" size="5">日</font>
                                            </th>
                                            <th width="100px" height="60px">
                                                <font size="size="5">一</font>
                                            </th>
                                            <th width="100px" height="60px">
                                                <font size="size="5">二</font>
                                            </th>
                                            <th width="100px" height="60px">
                                                <font size="size="5">三</font>
                                            </th>
                                            <th width="100px" height="60px">
                                                <font size="size="5">四</font>
                                            </th>
                                            <th width="100px" height="60px">
                                                <font size="size="5">五</font>
                                            </th>
                                            <th width="100px" height="60px">
                                                <font color="red" size="5">六</font>
                                            </th>
                                        </tr>
                                        <TBODY align="center">
                                            
                                        </TBODY>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        
    </body>
</html>